<template>
  <div class="about">
    <h1>This is an about page</h1>
    <z-count :count.sync="f_count"></z-count>
    <div>father-components:{{f_count}}</div>
    <div class="action-box">
      <p>father-action:</p>
      <div class="btn-group">
        <div class="add-btn btn" @click="add">+</div>
        <div class="del-btn btn" @click="del">-</div>
      </div>
    </div>

    <div>
      <ul>
        <p v-for="(item, i) in list">{{item}}
          <button @click="up(item, i)">UP</button>
          <button @click="down(item, i)">DOWN</button>
        </p>
      </ul>
      <button @click="output">输出</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'NewsDetails',
    components: {
      "z-count": () => import('./components_about/Z_child'),
    },
    data() {
      return {
          f_count: 0,
        list:[
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
        ]
      };
    },
    methods: {
      add() {
        this.f_count ++;
      },
      del() {
        this.f_count --;
      },
      up(row, i) {
        if (i !==0 ){
          let a = this.list.splice(i,1)[0];
          this.list.splice(i-1,0,a)
        }

      },
      down(row, i) {
        if (i < this.list.length) {
          let a = this.list.splice(i,1)[0];
          this.list.splice(i+1,0,a)
        };

      },
      output() {
        console.log(this.list)
      }
    }
  };
</script>

<style scoped>
  .btn-group {
    width: 48px;
    height: 24px;
    line-height: 24px;
    display: flex;
  }
  .btn {
    width: 24px;
    height: 24px;
    text-align: center;
    background-color: lightskyblue;
    color: #fff;
    cursor: pointer;
  }
  .add-btn {

  }
  .del-btn {

  }
</style>
